<template>
  <div class="order-box">
    <!-- 公用头部，单击“返回”按钮，直接前往个人中心 -->
    <custom-header :title="'我的订单'" :back="'/user'"></custom-header>
    <!-- 6个Tab选项，横线滚动，切换时触发 onChangeTab 方法，更新数据 -->
    <van-tabs
      @click-tab="onChangeTab"
      :color="'#1baeae'"
      :title-active-color="'#1baeae'"
      class="order-tab"
      v-model="status"
    >
      <van-tab title="全部" name=""></van-tab>
      <van-tab title="待付款" name="0"></van-tab>
      <van-tab title="待确认" name="1"></van-tab>
      <van-tab title="待发货" name="2"></van-tab>
      <van-tab title="已发货" name="3"></van-tab>
      <van-tab title="交易完成" name="4"></van-tab>
    </van-tabs>
    <div class="content">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="order-list-refresh">
          <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            @offset="10"
          >
            <div v-for="(item, index) in list" :key="index" class="order-item-box" @click="goTo(item.orderNo)">
              <div class="order-item-header">
                <span>订单时间：{{ item.createTime }}</span>
                <span>{{ item.orderStatusString }}</span>
              </div>
              <!-- Vant 的 Card 组件用于创建类似卡片形式的布局 -->
              <van-card
                v-for="one in item.newBeeMallOrderItemVOS"
                :key="one.orderId"
                :num="one.goodsCount"
                :price="one.sellingPrice"
                desc="全场包邮"
                :title="one.goodsName"
                :thumb="$filters.prefix(one.goodsCoverImg)"
              />
            </div>
          </van-list>
        </van-pull-refresh>
      </div>
  </div>
</template>
  
<script>
import { reactive, toRefs } from "vue";
import CustomHeader from "components/CustomHeader.vue";
import { getOrderList } from "service/order";
import { useRouter } from "vue-router";

export default {
  name: "Order",
  components: {
    CustomHeader,
  },
  setup() {
    const router = useRouter();
    const state = reactive({
      status: "", // 状态变量
      loading: false,
      finished: false,
      refreshing: false,
      list: [],
      page: 1,
      totalPage: 0,
    });
    const onChangeTab = ({ name }) => {
      // 这里 Tab 最好采用点击事件，@click，如果用 @change 事件，会默认进来执行一次。
      state.status = name;
      onRefresh();
    };
    const loadData = async () => {
      const {
        data,
        data: { list },
      } = await getOrderList({ pageNumber: state.page, status: state.status });
      state.list = state.list.concat(list);
      state.totalPage = data.totalPage;
      state.loading = false;
      if (state.page >= data.totalPage) state.finished = true;
    };

    // 前往订单详情页面，带上id用于查询
    const goTo = (id) => {
      router.push({ path: "/order-detail", query: { id } });
    };

    const goBack = () => {
      router.go(-1);
    };

    // 初始化加载数据
    const onLoad = () => {
      if (!state.refreshing && state.page < state.totalPage) {
        // 非下拉属性且当前页数小于总页数时，page加1
        state.page = state.page + 1;
      }
    //   下拉属性时，清空列表
      if (state.refreshing) {
        state.list = [];
        state.refreshing = false;
      }
      loadData();
    };

    // 下拉刷新
    const onRefresh = () => {
      state.refreshing = true;
      state.finished = false;
      state.loading = true;
      state.page = 1;
      onLoad();
    };

    return {
      ...toRefs(state),
      onChangeTab,
      goTo,
      onLoad,
      onRefresh,
    };
  },
};
</script>
  
<style lang="less" scoped>
@import "../theme/custom.less";
.order-box {
  .order-header {
    .fj();
    .wh(100%, 44px);
    line-height: 44px;
    padding: 0 10px;
    .boxSizing();
    color: #252525;
    background: #fff;
    border-bottom: 1px solid #dcdcdc;
    .order-name {
      font-size: 14px;
    }
  }
  .order-tab {
    position: fixed;
    left: 0;
    z-index: 1000;
    width: 100%;
    border-bottom: 1px solid #e9e9e9;
  }
  .skeleton {
    margin-top: 60px;
  }
  .content {
    height: calc(~"(100vh - 70px)");
    overflow: hidden;
    overflow-y: scroll;
    margin-top: 34px;
  }
  .order-list-refresh {
    .van-card__content {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .van-pull-refresh__head {
      background: #f9f9f9;
    }
    .order-item-box {
      margin: 20px 10px;
      background-color: #fff;
      .order-item-header {
        padding: 10px 20px 0 20px;
        display: flex;
        justify-content: space-between;
      }
      .van-card {
        background-color: #fff;
        margin-top: 0;
      }
    }
  }
}
</style>